<template>
  <div class="footer-icon">
    <div class="footer-icon-wrap">
      <a href="https://web-amped.music.163.com/">
        <div class="logo logo-amped"></div>
        <span class="logo-text">Amped Studio</span>
      </a>

      <a href="https://music.163.com/st/userbasic#/auth">
        <div class="logo logo-auth"></div>
        <span class="logo-text">用户认证</span>
      </a>

      <a href="https://music.163.com/st/musician">
        <div class="logo logo-musician"></div>
        <span class="logo-text">独立音乐人</span>
      </a>

      <a href="https://music.163.com/web/reward">
        <div class="logo logo-reward"></div>
        <span class="logo-text">赞赏</span>
      </a>

      <a href="https://music.163.com/st/ncreator/revenue-plan">
        <div class="logo logo-cash"></div>
        <span class="logo-text">视频奖励</span>
      </a>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return {}
  }
})
</script>

<style scoped lang="less">
.footer-icon {
  width: 45%;
  height: 75%;
  .footer-icon-wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    a {
      text-decoration: none;
      color: #999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span {
        font-size: 10px;
        transform: scale(0.8);
      }
    }
    .logo {
      width: 38px;
      height: 38px;
      border-radius: 50%;

    }
    .logo-amped {
      background: url('../../../assets/apmed.png') no-repeat;
      background-size: cover;
    }
    .logo-auth {
      background: url('../../../assets/auth.png') no-repeat;
      background-size: cover;
    }
    .logo-musician {
      background: url('../../../assets/musican.png') no-repeat;
      background-size: cover;
    }
    .logo-reward {
      background: url('../../../assets/reward.png') no-repeat;
      background-size: cover;
    }
    .logo-cash {
      background: url('../../../assets/cash.png') no-repeat;
      background-size: cover;
    }
  }
}
</style>
